<div class="row">
  <div class="col-6 small" ng-if="!$ctrl.canDrag">
    <em
      class="text-info"
      ng-bind="$ctrl.translate('warning_can_not_drag_drop',true, 'Note: Drag Drop only allow when order by priority asc!')"
    ></em>
  </div>
  <!-- <div class="col-6 text-end small">
    <em>
      Total records:
      <span ng-bind="$ctrl.data.totalItems" class="text-muted"></span></em>
  </div> -->
</div>

<div class="data-table" ng-if="$ctrl.data.items" ng-init="$ctrl.init()">
  <div class="row m-0">
    <div class="col-sm-12">
      <div class="row card-header">
        <div class="col-1">
          <!-- <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle"></small> -->
        </div>
        <div
          scope="col"
          ng-if="$index < 3"
          class="col-sm-2"
          ng-repeat="col in $ctrl.columns track by $index"
        >
          <strong ng-bind="$ctrl.translate(col.title)"> </strong>
        </div>
        <div scope="col" class="col-sm-2">
          <strong ng-bind="$ctrl.translate('created_date')"></strong>
        </div>
        <div scope="col" class="col-sm-2"></div>
      </div>
    </div>
  </div>
  <div
    dnd-list="$ctrl.data.items"
    id="list-page"
    class="nav"
    ng-if="$ctrl.data.items.length"
    dnd-inserted="$ctrl.insertCallback(index, item, external, type)"
    dnd-disable-if="!$ctrl.canDrag"
  >
    <div class="col-sm-12 dndPlaceholder"></div>
    <div
      ng-repeat="nav in $ctrl.data.items"
      class="col-sm-12 dnd-item border-left-0 border-right-0 rounded-0"
      dnd-draggable="nav"
      dnd-effect-allowed="move"
      dnd-selected="$ctrl.selected = nav"
      dnd-moved="$ctrl.updateOrders($index,$ctrl.data.items)"
      ng-class="{'selected': $ctrl.selected === nav}"
    >
      <div class="row">
        <div class="col-1 drag-header" style="cursor: grab">
          <small
            class="fa fa-grip-vertical fa-xs text-black-50 align-middle"
          ></small>
        </div>
        <div
          class="col-2 small preview-container"
          ng-if="$index < 3"
          ng-repeat="col in $ctrl.columns track by $index"
        >
          <module-data-preview
            data="nav.jItem[col.name]"
            datatype="col.datatype"
            width="50"
            class="mb-0"
          >
          </module-data-preview>
        </div>
        <div class="col-2">
          <small ng-bind="nav.createdDateTime | utcToLocal"> </small>
        </div>
        <div class="col">
          <div
            class="btn-group btn-group-sm float-end"
            role="group"
            aria-label="Actions"
          >
            <a
              class="btn btn-link text-primary"
              ng-click="$ctrl.view(nav.moduleId,nav.id)"
            >
              <span class="fa fa-eye"></span
            ></a>
            <a
              ng-if="nav.childNavs.length > 0"
              class="btn btn-link text-primary"
              ng-click="$ctrl.toggleChildNavs(nav)"
            >
              <span class="fa fa-list"></span>
            </a>
            <a ng-click="$ctrl.goTo(nav.id)" class="btn btn-link text-primary">
              <span class="fas fa-pen"></span>
            </a>
            <a
              ng-click="$ctrl.delete(nav.id);"
              class="btn btn-link del-popover text-danger"
              data-bs-toggle="popover"
              data-html="true"
            >
              <span class="fas fa-trash-alt"></span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
